<template>
    <div>
        <!-- 我是患者病历页面 -->
          <!-- 每个数据后面的v-model对应的数据不准确，未做校对 -->
         <!-- <div class="section1-1">
          <i class="el-icon-search" @click="sousuo"></i>
          <input type="text" placeholder="请输入患者姓名" v-model="filterText" class="input1" />
        </div> -->
        <div class="caidanming"><strong>看病就诊 /</strong>患者病历</div>  
      <div class="title">患者病历</div>
        <!-- 搜索框 -->
      <div class="section1-1">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="输入患者姓名" class="input1" />
      </div>
                 <!-- 表格 -->
      <div class="section2">
        <el-table
          ref="multipleTable"
          :data="newList"
          tooltip-effect="dark"
          style=" font-size:13px"
          @selection-change="handleSelectionChange"
          :row-style="{height:'60px'}"
          :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
        >
          <!-- 勾选框 -->
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="address" label="姓名" width="117"></el-table-column>
         <el-table-column prop="address" label="性别" width="117"></el-table-column>
          <el-table-column prop="name" label="年龄" width="117"></el-table-column>
          <el-table-column prop="name" label="病症" width="117"></el-table-column>
          <el-table-column prop="name" label="处方" width="117"></el-table-column>
          <el-table-column prop="name" label="费用" width="117"></el-table-column>
          <el-table-column prop="name" label="电话" width="117"></el-table-column>
          
           <el-table-column prop="name" label="看病时间" width="117"></el-table-column>
          <el-table-column prop="name" label="备注" width="117"></el-table-column>
          <el-table-column label="操作" width="75">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="caozuo">
                  <el-dropdown-item @click.native="modify(scope.row,0)">编辑</el-dropdown-item>
                  <el-dropdown-item @click.native="modify(scope.row,1)">复制</el-dropdown-item>
                  <el-dropdown-item @click.native="modify(scope.row,2)">删除</el-dropdown-item>
                  <el-dropdown-item @click.native="modify(scope.row,3)">禁用</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
         <div class="paging">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageNum"
            layout="prev, pager, next, jumper"
            :total="drugList"
          ></el-pagination>
        </div>
      </div>
   </div>
</template>
<script>
export default {
    data(){
        return{
            filterText: '',
            newList:[],
            handleSelectionChange:'',
            currentPage:'',
            pageNum:'',
            drugList:[],
            handleCurrentChange:'',
        }
    },
    methods: {
          // 搜索
    sousuo() {
      console.log(this);
      console.log('qqq');
    },
    },
}
</script>
<style scoped>
.section1 {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
}
.input1 {
  width: 150px;
  height: 30px;
  border: none;
  margin-left: 10px;
}

input:focus {
  border: none;
  outline: none;
}
.paging {
  margin-top: 30px;
  margin-left: 30%;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>